<template>
  <div class="container-pt">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      fixed
      title="我的文章"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="别划拉了，到底了🤑🤑🤑"
      :error.sync="isErr"
      error-text="出错了，点我永生"
      @load="getList"
    >
      <article-list
        :disable-swiper="false"
        v-for="(item, index) in list"
        :key="index + 1"
        :item="item"
      >
        <van-button square type="warning" @click="edit(item.id)" text="修改" />
        <van-button square type="danger" text="删除" @click="del(item.id)" />
      </article-list>
    </van-list>
    <van-popup v-model="active" style="height: 100%" position="bottom">
      <van-nav-bar title="修改文章">
        <template #right>
          <van-icon name="close" @click="active = false" size="18" />
        </template>
      </van-nav-bar>
      <editArticleForm :id="id"></editArticleForm>
    </van-popup>
  </div>
</template>

<script>
import editArticleForm from "../../components/edit-article-form .vue";
import { delMyActicleApi, getMyActicleApi } from "../../api/article";
export default {
  components: { editArticleForm },
  data() {
    return {
      active: false,
      id: "",
      list: [],
      loading: false,
      finished: false,
      page: 1,
      isErr: false,
    };
  },
  methods: {
    async getList() {
      try {
        const {
          data: { data, count },
        } = await getMyActicleApi({ page: this.page, limit: 10 });
        // console.log(data);
        this.list.push(...data);
        this.list.length >= count ? (this.finished = true) : this.page++;
      } catch (err) {
        this.isErr = true;
      } finally {
        this.loading = false;
      }
    },
    async del(id) {
      const { errno } = await delMyActicleApi({ id });
      // console.log(res);
      if (errno === 0) this.$toast("删除成功");
      this.page = 1;
      this.list = [];
      this.loading = true;
      this.getList();
    },
    edit(id) {
      // console.log(id);
      this.active = true;
      this.id = id;
    },
  },
  watch: {
    active: {
      handler() {
        this.page = 1;
        this.list = [];
        this.getList();
      },
    },
  },
};
</script>

<style>
</style>